<template>
  <div class="body-container">
    <!-- <el-tabs class="my-top-tab" v-model="tabsValue" @tab-remove="removeTab">
      <el-tab-pane class="my-tab-item" v-for="(item, index) in menuTabs" :key="item.name" :name="item.name"
        :closable="item.closable">
        <span slot="label">
          <svg-icon :icon-class="getIconClass(item)" />
          {{item.title}}
        </span>
        <div v-if="tabsValue==item.name" :sceneType="item.sceneType" :pageTitle="item.title" :is="item.activeScene"></div>
      </el-tab-pane>
    </el-tabs> -->
    <div :sceneType="sceneType" :defaultSceneId="defaultSceneId" :pageTitle="pageTitle" :pageIcon="pageIcon" :is="activeScene"></div>
  </div>
</template>
<script>
  import defaultIndex from "@/views/default/index";
  import masterIndex from "@/views/master/index";
  export default {
    name: 'gongzuotai',
    components: {
      defaultIndex,
      masterIndex
    },
    computed: {
      menuTabs() {
        return this.$store.state.tabsView.visitedTabs
      },
      currentTab() {
        return this.$store.state.tabsView.currentTab
      },
    },
    watch: {
      currentTab: {
        handler(newValue, oldValue) {
          if (newValue) {
            this.tabsValue = newValue.name
            this.sceneType = newValue.sceneType
            this.defaultSceneId = newValue.defaultSceneId || 0
            this.pageTitle = newValue.title
            this.pageIcon = newValue.class
            localStorage.setItem('dashboard_scene', JSON.stringify({
              tabsValue: this.tabsValue,
              sceneType: this.sceneType,
              defaultSceneId: this.defaultSceneId,
              pageTitle: this.pageTitle,
              pageIcon: this.pageIcon
            }))
          } else {
            this.$router.push({
              path: '/index'
            })
          }
        }
      }
    },
    data() {
      return {
        showAll: false,
        tabsValue: '1',
        sceneType: 0,
        defaultSceneId: 0,
        pageTitle: '',
        pageIcon: '',
        activeScene: 'masterIndex'
        // menuTabs: [{
        //   title: '工作台',
        //   name: '1',
        //   class: 'leftmenu-desktop',
        //   activeScene: 'defaultIndex',
        //   sceneType: 0
        // }],
      }
    },
    created() {
      var preScene = localStorage.getItem('dashboard_scene')
      if (preScene) {
        preScene = eval('(' + preScene + ')')
        this.tabsValue = preScene.tabsValue
        this.sceneType = preScene.sceneType
        this.defaultSceneId = preScene.defaultSceneId
        this.pageTitle = preScene.pageTitle
        this.pageIcon = preScene.pageIcon
      }
      this.getData();
      if (this.currentTab) {
        this.tabsValue = this.currentTab.name
        this.sceneType = this.currentTab.sceneType
        this.defaultSceneId = this.currentTab.defaultSceneId
        this.pageTitle = this.currentTab.title
        this.pageIcon = this.currentTab.class
      }
    },
    methods: {
      getData() {},
      addTab(item) {
        var index = this.menuTabs.findIndex((menu) => {
          return menu.name == item.name
        })
        if (index > -1) {
          this.tabsValue = this.menuTabs[index].name
        } else {
          this.menuTabs.push(item)
          this.tabsValue = item.name
        }
      },
      getIconClass(item) {
        if (this.tabsValue == item.name) {
          return item.class + '-active'
        }
        return item.class
      },
      removeTab(targetName) {
        var tabItem = this.menuTabs.find((tab) => tab.name === targetName);
        this.$store.dispatch('tabsView/delVisitedTab', tabItem)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
